<template>
  <div class="app manage" id="app" :class="{ 'full-screen': fullScreen }">
    <div class="nav-header">
      <div class="left-logo">
        <img src="/static/img/logo.png" alt="">
        <span>一站式信息服务系统</span>
      </div>
      <div class="nav-right">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <span>欢迎您，</span>管理员<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="sidebar">
      <div class="sidebar-nav">
        <!-- unique-opened -->
        <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo" @select="handelMenu"
          :default-opends="opends">
          <div v-for="item in menus" :key="item.menuID">
            <el-menu-item :index="item.menuPath" v-if="item.children.length == 0">
              <i :class="item.icon" v-if="item.icon"></i>
              <span slot="title">{{ item.menuName }}</span>
            </el-menu-item>
            <el-submenu :index="item.menuPath" v-if="item.children.length > 0">
              <template slot="title">
                <i :class="item.icon" v-if="item.icon"></i>
                <span>{{ item.menuName }}</span>
              </template>
              <el-menu-item :index="sItem.menuPath" v-for="sItem in item.children" :key="sItem.menuID">
                <i :class="sItem.icon" v-if="sItem.icon"></i>
                <span slot="title">{{ sItem.menuName }}</span>
              </el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </div>
    <div class="main-content">
      <el-button type="default" icon="el-icon-arrow-left" size="mini" @click="back" class="back" v-if="!fullScreen">返回</el-button>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="footer">
      成都思博克信息技术有限公司 版权所有　©ALL Rrights Reserved. 备案号：蜀ICP备16006923号
    </div>
  </div>
</template>
<script>
import store from "@/vuex/store.js";
export default {
  store,
  data() {
    return {
      fullScreen: false,
      activeIndex: "",
      menus: [
        {
          "children": [],
          "menuID": "1",
          "menuIndex": 1,
          "menuName": "首页",
          "icon": "el-icon-s-home",
          "menuLevel": 1,
          "parentID": "",
          "menuPath": "/setting/home",
          "isDelete": false
        },
        {
          "children": [],
          "menuID": "2",
          "menuIndex": 1,
          "menuName": "数据配置",
          "icon": "el-icon-s-tools",
          "menuLevel": 1,
          "parentID": "",
          "menuPath": "/setting/keys",
          "isDelete": false
        },
      ],
      opends: [],
    };
  },
  // beforeRouteEnter(to, from, next) {
  //   let userInfo = sessionStorage.getItem("userInfo");
  //   let token = "";
  //   if (userInfo) {
  //     token = JSON.parse(userInfo).token || "";
  //   }
  //   if (token) {
  //     next();
  //   } else {
  //     next({ path: '/user/login' });
  //   }
  // },
  watch: {
    $route(to, from) {
      //监听路由是否变化FV
      this.fullScreen = to.meta.fullScreen;
    },
  },
  created() {
    this.activeIndex = this.$route.path;
    this.fullScreen = this.$route.meta.fullScreen;
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    init() {
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign(
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      if (browser.versions.trident) {
        window.attachEvent("beforeunload", () => {
          sessionStorage.setItem("store", JSON.stringify(this.$store.state));
        });
      } else {
        window.addEventListener("beforeunload", () => {
          sessionStorage.setItem("store", JSON.stringify(this.$store.state));
        });
      };
    },
    handelMenu(index) {
      this.activeIndex = index;
    },
    logOut() {
      this.$confirm('即将注销登录退出到登录页面, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$root.userInfo = {};
        this.func.removeSession('userInfo');
        this.$router.push({ path: '/user/login' });
      })
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.app {
  height: 100%;
  position: relative;
  background-color: #f8f8f8;

  .nav-header {
    background-color: #3475E3;
    // box-shadow: 0 0 35px 5px #b8b8b8;
    height: 50px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    padding: 0 15px;

    .left-logo {
      position: relative;
      height: 50px;
      padding: 5px 0;
      line-height: 40px;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      box-sizing: border-box;

      img {
        height: 30px;
        filter: grayscale(100%) brightness(200%);
      }
    }

    .nav-right {
      color: #fff;
      position: absolute;
      right: 20px;
      top: 10px;
      height: 30px;
      line-height: 20px;
      padding: 5px 10px;
      border-radius: 2px;
      background-color: rgba(0, 0, 0, 0.1);

      .el-dropdown {
        line-height: 20px;
        cursor: pointer;
        color: #fff;
      }

      .el-dropdown-menu {
        padding: 0;
        margin: 0;
        left: inherit !important;
        right: 0 !important;
      }
    }
  }

  .sidebar {
    width: 180px;
    position: absolute;
    top: 50px;
    bottom: 30px;
    left: 0;
    overflow: auto;
    border: 1px solid #dddddd;
    border-width: 0 1px 0 0;

    .sidebar-shortcuts {
      position: relative;
      border-bottom: 1px solid #e5e5e5;
      background-color: #f5f5f5;
      height: 35px;
      padding: 7px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      .el-button {
        padding: 0;
        height: 22px;
        line-height: 22px;
        width: 35px;
        font-size: 15px;
        cursor: initial;
      }

      .el-button+.el-button {
        margin: 0;
      }
    }

    .sidebar-nav {
      position: absolute;
      left: 0;
      top: 0px;
      bottom: 0;
      right: 0;
      overflow-y: auto;

      .el-menu {
        border: none;
      }
    }
  }

  .main-content {
    position: absolute;
    top: 50px;
    bottom: 30px;
    left: 180px;
    right: 0;
    overflow: auto;
    background-color: #f2f2f2;

    .back {
      position: absolute;
      right: 20px;
      top: 5px;
      z-index: 2;
    }
  }

  .footer {
    width: 100%;
    color: rgb(102, 102, 102);
    background-color: #f9f9f9;
    position: absolute;
    bottom: 0px;
    z-index: 1;
    text-align: center;
    border-top: 1px solid rgb(221, 221, 221);
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }

  &.full-screen {
    .nav-header {
      display: none;
    }

    .footer {
      display: none;
    }

    .sidebar {
      display: none;
    }

    .main-content {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
    }
  }
}
</style>
<style lang="scss">
.main-content .page-content {
  background-color: transparent;
}

.main-content .page-content>.content {
  padding: 15px;
  position: relative;
  height: calc(100% - 35px);
  overflow: auto;
  color: #333;
}

.main-content .page-content>.content .inner-box {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  border: 1px solid #eee;
  height: 100%;
  position: relative;
}

.main-content .page-content>.content .inner-box .content-title {
  font-size: 18px;
  font-weight: bold;
  color: #3475E3;
}
</style>